<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			ul{
			list-style: none;
			padding: 0;
			margin: 0;
			}
			li{
				margin-bottom: 0px;
			}
			
		</style>
	</head>
	<body>
		<ul>
			<li id="username">
				<label for="usernameInput">账号:</label>
				<input type="text" id="usernameInput" />
				<label id="usernameTip">请输入6-12个字符</label>
			</li>
			<li id="password">
				<label for="passwordInput">密码:</label>
				<input type="password" id="passwordInput" />
				<label id="passwordTip">请输入6-12个字符</label>
			</li>
		</ul>
	</body>
	<script>
		var usernameinput = document.getElementById("usernameInput");
		var passwordinput = document.getElementById("passwordInput");
		var usernametip = document.getElementById("usernameTip");
		var passwordtip = document.getElementById("passwordTip");
		
		//实时监听
		usernameinput.addEventListener("input",function(){
			var inputlenth = usernameinput.value.length;
			if (inputlenth == 0){
				usernametip.textContent = "请输入6-12个字符";
				usernametip.style.color = "black";
			} else if(inputlenth < 6){
				usernametip.textContent = "字符数量不够"
				usernametip.style.color = "red";
			} else if(inputlenth > 12){
				usernametip.textContent = "字符数量超出限制"
				usernametip.style.color = "red";
			} else{
				usernametip.textContent = "字符数量正确"
				usernametip.style.color = "green";
			}
			
		})
		passwordInput.addEventListener("input", function() {
		    var inputLength = passwordInput.value.length;
		    if (inputLength == 0){
		        passwordTip.textContent = "请输入6-12个字符";
		        passwordTip.style.color = "black";
		    } else if(inputLength < 6){
		        passwordTip.textContent = "字符数量不够";
		        passwordTip.style.color = "red";
		    } else if (inputLength > 12) {
		        passwordTip.textContent = "字符数量超出限制";
		        passwordTip.style.color = "red";
		    } else {
		        passwordTip.textContent = "字符数量正确";
		        passwordTip.style.color = "green";
		    }
		});
	</script>
</html>
